<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/base.css">
    <script src="static/js/jquery.js"></script>
    <script src="static/js/ajax.js"></script>
    <script src="static/layui/layui.js"></script>
</head>
<body>
<form id="editForm" class="layui-form" style="margin: 10px">
    <input type="hidden" id="id" name="id" value="${car.id}">
    <div class="layui-form-item">
        <label class="layui-form-label" for="carNo"><span class="red">*</span>车牌号</label>
        <div class="layui-input-block">
            <input type="text" name="carNo" id="carNo" placeholder="请填车牌号" class="layui-input"
                   value="${car.carNo}"
                   lay-reqtext="请填写车牌号"
                   lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="color"><span class="red">*</span>颜色</label>
        <div class="layui-input-block">
            <input type="text" name="color" id="color" placeholder="请填写颜色" class="layui-input"
                   value="${car.color}"
                   lay-reqtext="请填写昵称"
                   lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="brandId"><span class="red">*</span>品牌</label>
        <div class="layui-input-inline">
            <select name="brandId3" id="brandId3" lay-reqtext="请选择品牌"
                    lay-verify="required" lay-filter="brandId3">
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="brandId2" id="brandId2" lay-reqtext="请选择品牌"
                    lay-verify="required" lay-filter="brandId2">
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="brandId" id="brandId" lay-reqtext="请选择品牌"
                    lay-verify="required" lay-filter="brandId">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="categoryId"><span class="red">*</span>分类</label>
        <div class="layui-input-block">
            <select name="categoryId" id="categoryId">
                <option value="">[选择分类]</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="carImages"><span class="red">*</span>车况</label>
        <input type="hidden" name="carImages" id="carImages" lay-reqtext="请上传车况图片"
               lay-verify="required">
        <div class="layui-input-block">
            <div class="upload-group">
                <div class="upload-btn">
                    <button type="button" class="layui-btn layui-bg-orange" id="uploadBtn">上传图片</button>
                </div>
                <div class="image-group" id="carImagesDiv">

                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-filter="submitBtn" lay-submit>提交</button>
        </div>
    </div>
</form>
</body>
<script>
    const {form, upload} = layui;
    const carImageList = [];
    $(function () {
        getCategoryList()
        getBrandList()
        const id = $("#id").val();
        if (id) {
            ajax.get('car/image/' + id).then(data => {
                for (const d of data) {
                    carImageList.push(d.carImage);
                }
                createImage();
            })
            const brandIds = "${car.brandIds}".split(",");
            getBrandList(brandIds[0], "brandId2");
            getBrandList(brandIds[1], "brandId")
            setTimeout(function () {
                $("#brandId").val(brandIds[2]);
                $("#brandId2").val(brandIds[1]);
                $("#brandId3").val(brandIds[0]);
                form.render();

            }, 200)
        }


        form.on("select(brandId3)", function (data) {
            $("#brandId2").empty();
            $("#brandId").empty();
            form.render();
            if (data.value) {
                getBrandList(data.value, "brandId2");
            }

        });
        form.on("select(brandId2)", function (data) {
            $("#brandId").empty();
            form.render();
            if (data.value) {
                getBrandList(data.value, "brandId");
            }

        });
        form.on("submit(submitBtn)", function (data) {
            const brandIds = [];
            brandIds.push(data.field.brandId3)
            brandIds.push(data.field.brandId2)
            brandIds.push(data.field.brandId)
            data.field.brandIds = brandIds.toString();
            ajax.post("car/update", data.field).then(() => {
                layer.alert(`${data.field.id?"修改":"添加"}成功！`, {icon: 6}, function () {
                    closeWin();
                    parent.reloadTable();
                })
            })
            return false;
        })
        upload.render({
            elem: "#uploadBtn",
            url: "upload",
            data: {type: "car"},
            done(res) {
                if (res.code === 200) {
                    carImageList.push(res.data);
                    createImage();
                } else {
                    layer.msg('上传失败！', {icon: 5})
                }
            }
        });
    })

    function closeWin() {
        const index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }


    function getCategoryList() {
        ajax.get('category/select').then(data => {
            const categoryList = data.data;
            let $html = '';
            categoryList.forEach(item => {
                $html += '<option ' + (item.status == 1 ? "" : "disabled") + ' value="' + item.id + '">' + item.name + '</option>';
            })
            $("#categoryId").append($html)
            const categoryId = "${car.categoryId}";
            if (categoryId) {
                $("#categoryId").val(categoryId)
            }
            form.render();
        })
    }

    function createImage() {
        $("#carImages").val(carImageList.toString());
        $("#carImagesDiv").empty();
        for (const carImage of carImageList) {
            $("#carImagesDiv").append('<div class="image-item"><div class="image-view"><img src="' + carImage + '" alt=""></div><div class="image-opt"><i class="layui-icon layui-icon-search" onclick="showImage(this)"></i><i class="layui-icon layui-icon-delete" onclick="deleteImage(\'' + carImage + '\')"></i></div></div>')
        }
    }

    function showImage(_this) {
        const src = $(_this).parents(".image-item").find("img").prop("src");
        layer.photos({
            photos: {
                data: [{
                    src
                }]
            }
        })
    }

    function deleteImage(carImage) {
        layer.confirm('确定删除该图片?', {icon: 3, title: "询问"}, function (index) {
            let i = carImageList.indexOf(carImage);
            carImageList.splice(i, 1);
            createImage();
            layer.close(index);
        })
    }

    function getBrandList(pid = 0, selector = 'brandId3') {
        ajax.get("car/brand/select", {pid}).then(data => {
            const $select = $('#' + selector);
            $select.empty();
            let $html = '<option value="">[选择品牌]</option>';
            for (let brand of data) {
                $html += '<option value="' + brand.id + '">' + brand.brandName + '</option>';
            }
            $select.append($html);
            form.render();
        })
    }
</script>
</html>

